import { lazy } from "react";
import { createBrowserRouter } from "react-router-dom";
import {
  BankOutlined,
  FileDoneOutlined,
  MailOutlined,
  MessageOutlined,
  UsergroupAddOutlined,
} from "@ant-design/icons";
const Login = lazy(() => import("../page/login/index"));
const Home = lazy(() => import("../page/home/index"));
const Socket = lazy(() => import("../page/socket/index"));
const Layout = lazy(() => import("../page/layout/index"));
const User = lazy(() => import("../page/user/index"));
const Order = lazy(() => import("../page/order/index"));
const Error = lazy(() => import("../page/Error/index"));
const Info = lazy(() => import("../page/order/children/Info"));

const routerAll = {
  home: {
    path: "/home/index",
    element: <Home />,
    title: "首页",
    icon: <BankOutlined />,
  },
  socket: {
    path: "/home/socket",
    element: <Socket />,
    title: "聊天",
    icon: <MessageOutlined />,
  },
  user: {
    path: "/home/user",
    element: <User />,
    title: "用户",
    icon: <UsergroupAddOutlined />,
  },
  order: {
    path: "/home/order",
    element: <Order />,
    title: "订单",
    icon: <FileDoneOutlined />,
    children: [
      {
        path: "/home/order/info",
        element: <Info />,
        title: "详情",
        icon: <MailOutlined />,
      },
    ],
  },
};

const roles = {
  admin: {
    pageRouter: ["home", "socket", "user", "order"],
    btns: {
      home: ["add", "edit", "delte"],
    },
  },
  user: {
    pageRouter: ["home", "user"],
    btns: {
      home: ["add", "edit"],
    },
  },
};
const username = localStorage.getItem("username") || "user";
const { pageRouter, btns } = roles[username];

export const routers = pageRouter.map((item) => {
  return {
    ...routerAll[item],
    loader() {
      return btns[item];
    },
  };
});

const router = createBrowserRouter([
  { path: "/login", element: <Login /> },
  { path: "*", element: <Error /> },
  { path: "/home", element: <Layout />, children: routers },
]);
export default router;
